<template>
<h2>各科成绩柱状统计图</h2>
  <div :id="main" style="width: 1250px; height: 613px"></div>
</template>

<script>
import * as echarts from "echarts";
const axios = require("axios");
export default {
  name: "student_tongji",
  data() {
    return {
      s_xuehao: "",
      main: "",
    };
  },
  methods: {
    chaxun() {
      let _this = this;
      if(this.s_xuehao==''){
        this.$router.push({ path: "/" });
      }else{
      axios
        .get("https://localhost:44391/api/student/chaxunid", {
          params: {
            sxuehao: this.s_xuehao,
          },
        })
        .then(function (response) {
          debugger
          // handle success
          console.log(response.data);
          debugger
          // _this.zhuzhuang();
          let x = [];
          let y = [];
          //  let history = [];
          response.data.forEach((element) => {
            x.push(element.kname);
            y.push(element.fenshu);
          });
          debugger
          console.log(x, y);
          debugger
          _this.zhuzhuang(x, y);
        });
      }
    },
    zhuzhuang(x, y) {
      debugger
      var chartDom = document.getElementById(this.main);
      let newpro = new Promise((res) =>{
        res();
      });
      newpro.then(()=>{
        var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: "category",
          data: x,
        },
        yAxis: {
          type: "value",
        },
        series: [
          // {
          //   data: y,
          //   type: "bar",
          //   showBackground: true,
          //   backgroundStyle: {
          //     color: "rgba(180, 180, 180, 0.2)",
          //   },
          // },
          {
            name: "Life Cost",
            type: "bar",
            stack: "Total",
            label: {
              show: true,
              position: "inside",
            },
            data: y,
          },
        ],
      };

      option && myChart.setOption(option);
      })
      
    },
  },
  mounted() {
    this.main = Date.now() + Math.random();
    console.log(this.main)
    this.s_xuehao = this.$store.state.s_xuehao;
    this.chaxun();
  },
};
</script>

<style scoped>
 h2{
   text-align: center;
   margin-top: 0px;
   margin-bottom: 0px;
 }
</style>